<script setup lang="ts">
  import { NIcon, NDatePicker, NInput, NDataTable, NPagination } from 'naive-ui'
  import { useRouter } from 'vue-router'
  import {
    AccessTimeOutlined,
    CheckCircleFilled,
    CancelFilled,
    MoreHorizFilled,
  } from '@vicons/material'
  import { h, onMounted, ref } from 'vue'
  import BackNav from '@/components/common/BackNav/index.vue'
  import { getSchemeAuditList } from '@/api/scheme'
  import dayjs from 'dayjs'
  const columns = [
    {
      title: '序号',
      key: 'index',
      render: (row: { index: number }) => {
        return row.index + 1 + (page.value - 1) * pageSize.value
      },
    },
    {
      title: '方案名称',
      key: 'schemeName',
      render: (row: { schemeName: string }) => {
        return `${row.schemeName ?? '--'}`
      },
    },
    {
      title: '文件大小',
      key: 'fileSize',
      render: (row: { fileSize: string }) => {
        return row.fileSize ?? '--'
      },
    },
    {
      title: '提交人',
      key: 'auditorId',
    },
    {
      title: '提交时间',
      key: 'createTime',
    },
    {
      title: '完成时间',
      key: 'updateTime',
    },
    {
      title: '审核结果',
      key: 'auditStatus',
      render: (row: { auditStatus: string }) => {
        let icon, text, color, bgColor

        if (+row.auditStatus === 1) {
          icon = CheckCircleFilled
          text = '审核通过'
          color = '#00B42A'
          bgColor = '#E8FFEA'
        } else if (+row.auditStatus === 2) {
          icon = CancelFilled
          text = '审核未通过'
          color = '#F5222D'
          bgColor = '#FFECE8'
        } else {
          icon = MoreHorizFilled
          text = '未审核'
          color = '#F77234'
          bgColor = '#FFF1EB'
        }

        return h(
          'div',
          {
            class: 'flex items-center w-fit gap-1 rounded px-2 h-[20px] leading-[20px] text-[12px]',
            style: {
              backgroundColor: bgColor,
            },
          },
          [
            h(
              NIcon,
              {
                size: 16,
                color,
                class:
                  +row.auditStatus === 0
                    ? 'rounded-full bg-[#F77234] !text-[#fff] !text-[14px]'
                    : '',
              },
              { default: () => h(icon) }
            ),
            h('div', { style: { color } }, { default: () => text }),
          ]
        )
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (row: { auditStatus: string; id: string; schemeId: string }) => {
        return h(
          'div',
          { class: 'text-[#0B5CFF] cursor-pointer', onClick: () => handleAudit(row) },
          { default: () => (+row.auditStatus === 0 ? '审核' : '查看') }
        )
      },
    },
  ]

  const handleAudit = async (row: { auditStatus: string; id: string; schemeId: string }) => {
    switch (+row.auditStatus) {
      case 1:
        await router.push(`/createAuditPass/${row.schemeId}/1`)
        break
      case 2:
        await router.push(`/createAuditPass/${row.schemeId}/2`)
        break
      case 0:
        await router.push(`/createToAudit/${row.id}`)
        break
    }
  }

  const router = useRouter()

  const data = ref([])

  const date = ref(null)
  const name = ref('')

  // 分页
  const page = ref(1)
  const pageSize = ref(10)
  const itemCount = ref(100)

  const handleUpdatePageSize = async (_pageSize: number) => {
    pageSize.value = _pageSize
    page.value = 1
    await getList()
  }

  const handleUpdatePage = async (_page: number) => {
    page.value = _page
    await getList()
  }

  const handleChange = async () => {
    page.value = 1
    await getList()
  }
  const getList = async () => {
    const res = await getSchemeAuditList({
      pageNum: page.value,
      pageSize: pageSize.value,
      type: 1,
      schemeName: name.value ?? undefined,
      startTime: date.value?.[0] ? dayjs(date.value[0]).format('YYYY-MM-DD 00:00:00') : undefined,
      endTime: date.value?.[1] ? dayjs(date.value[1]).format('YYYY-MM-DD 23:59:59') : undefined,
    })
    res.list.forEach((item: any, index: number) => {
      item.index = index
    })
    data.value = res.list
    itemCount.value = res.total
  }

  onMounted(async () => {
    await getList()
  })
</script>

<template>
  <div class="h-full flex flex-col py-5 gap-4">
    <BackNav title="待我审核" />
    <div class="flex-1">
      <div class="h-full bg-white rounded p-5">
        <div class="flex flex-col h-full">
          <!-- 条件筛选 -->
          <div class="h-8 leading-8 flex items-center gap-4">
            <div class="flex items-center">
              <div class="text-[#4A5055]">时间：</div>
              <div class="flex items-center">
                <n-date-picker
                  v-model:value="date"
                  type="daterange"
                  @update:value="handleChange"
                  size="small"
                  class="w-[400px]"
                  clearable
                >
                  <template #date-icon>
                    <n-icon :size="16">
                      <AccessTimeOutlined />
                    </n-icon>
                  </template>
                </n-date-picker>
              </div>
            </div>
            <div class="flex items-center">
              <div class="text-[#4A5055]">文档名称：</div>
              <div class="flex items-center">
                <n-input
                  class="!w-[240px]"
                  @keyup.enter="handleChange"
                  v-model:value="name"
                  placeholder="请输入文档名称"
                  size="small"
                />
              </div>
            </div>
          </div>
          <!-- 表格 -->
          <div class="flex-1 mt-6 flex flex-col">
            <n-data-table
              class="max-h-[calc(100%-56px)] overflow-y-auto"
              :columns="columns"
              :data="data"
              :pagination="false"
              :bordered="false"
            />
            <div class="h-8 mt-6 flex justify-end items-center">
              <n-pagination
                show-quick-jumper
                v-model:page="page"
                :page-size="pageSize"
                :item-count="itemCount"
                :page-sizes="[10, 20, 50]"
                show-size-picker
                :on-update-page-size="handleUpdatePageSize"
                :on-update-page="handleUpdatePage"
              >
                <template #prefix="{ itemCount }">
                  <span class="pingfang text-[#666D7A]">共 {{ itemCount }} 条</span>
                </template>
                <template #suffix>
                  <span class="pingfang text-[#666D7A]">页</span>
                </template>
              </n-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
